<template>
	<view >
		<view class="commentInput" @tap.self="blur" >
			<view class="commentInput_input" @tap.self="blur2">
				<!-- <input type="text" :focus='isFocus'  ref='input' @confirm="send" confirm-type='send' :adjust-position='false' v-model="value" :confirm-hold='true' placeholder="写评论" placeholder-class="input_placeholder"/> -->
				<textarea  :focus='isFocus'  ref='input' @confirm="send"  @linechange='linechange' :maxlength='200' :style="{height:height,padding:padding}" :show-confirm-bar='false' :adjust-position='false' v-model="value" :fixed='true' :confirm-hold='true' placeholder="写评论" placeholder-class="input_placeholder"/>
				<text @tap.stop="send">发送</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value:"",
				sendIng:false,
				isFocus:true,
				height:'38rpx',
				padding:'20rpx 30rpx'
			};
		},
		props:['value1'],
		mounted() {
			if(this.value1){
				this.value=this.value1
			}
			this.$nextTick(()=>{
				this.$refs.input.$refs.textarea.focus()
			})
		},
		methods:{
			send(){
				if(!localStorage.getItem('userId')){
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				this.$refs.input.$refs.textarea.focus()
				if(this.value){
					setTimeout(()=>{
						this.$emit('submit',this.value)
					},100)
				}
			},
			blur2(){
				this.$refs.input.$refs.textarea.focus()
			},
			linechange(e){
				if(e.detail.lineCount==1){
					this.height='38rpx'
					this.padding='17rpx 30rpx'
				}else if(e.detail.lineCount==2){
					this.height='76rpx'
					this.padding='30rpx'
				}else if(e.detail.lineCount>=3){
					this.height='114rpx'
					this.padding='20rpx 30rpx 2rpx'
				}
				
			},
			blur(){
				if(!this.sendIng){
					setTimeout(()=>{
						this.$emit('blur',this.value)
					},100)
				}
			}
		}
	}
</script>

<style lang="scss">
.commentInput{
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 1003;
	background-color: rgba(0,0,0,0.2);
	.commentInput_input{
		width: 750rpx;
		position: absolute;
		bottom: 0;
		background-color:#FFFFFF ;
		box-shadow:0px -1rpx 0px 0px rgba(0,0,0,0.08);
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding:20rpx 30rpx ;
		input{
			height: 84rpx;
			width: 594rpx;
			border: 1rpx solid #979797;
			border-radius: 42rpx;
			font-size: 26rpx;
			color: #666666;
			padding: 0 30rpx;
		}	
		textarea{
			height: 38rpx;
			min-height:38rpx;
			// height: 84rpx;
			width: 534rpx;
			border: 1rpx solid #979797;
			border-radius: 42rpx;
			font-size: 26rpx;
			line-height: 38rpx;
			color: #666666;
			padding: 20rpx 30rpx;
			box-sizing: content-box;
			text-align: justify;
			display: flex;
		}	
		text{
			font-size:32rpx ;
			letter-spacing: 1rpx;
			color: #A66354;
		}
	}
}
.input_placeholder{
	color: #CACACA;
}
</style>
